webpack - externals

想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。

externals作用：

• 将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间；
• 不影响第三方库的使用；

就以之前装过的lodash为例：在src/js/index.js文件中加入

import _ from 'lodash'

注意：webpack.config.js中需要注释掉optimization配置

当不配置externals时候，构建项目， lodash被打包进入bundle。

在webpack.config.js添加externals，

  externals: {
    // 拒绝lodash打包
    lodash: '_', 
  }

重新构建项目，可以发现，lodash没有被打包进去。

所以我们需要在使用lodash的话，可以使用cdn的方式，可以在index.html加入cdn地址

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>

打包后，在dist的index.html文件中可以看到也加入了cdn。

解释一下：externals中的lodash: '_'，表示什么意思。

可以理解为 import _ from 'lodash'。

本章结束！